<template>
	<div class="container">
		<div class="plugins-tips">
			vue-schart：vue.js封装sChart.js的图表组件。 访问地址：
			<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
		</div>

		<div
        	id="echart"
       	    style="width: 600px;height:400px;"
	      />
	</div>
</template>

<script setup lang="ts" name="basecharts">

import {onMounted} from "vue";
import * as echarts from 'echarts';

let myEcharts = echarts;


onMounted(()=>{
	let chart = myEcharts.init(document.getElementById("echart"),'dark');
	chart.setOption({
        // 设置图表的标题
        title: {
          // 设置标题文本
          text: "2021年各月份销售量（单位：件）",
          // title 组件离容器左侧的距离
          left: "center",
        },
        // 设置图表的 X 轴
        xAxis: {
          // 数据类型为离散的类目数据
          type: "category",
          // 设置 X 轴数据
          data: [
            "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
          ]
        },
        // 设置提示框组件
        tooltip: {
          // 设置提示框的触发条件
          trigger: "axis"
        },
        // 设置图表的 Y 轴
        yAxis: {
          // 数据类型为连续的数值数据
          type: "value"
        },
        // 设置图表的图例
        series: [
          {
            // 图例中要展示的数据
            data: [
              606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
            ],
            // 设置图表的类型为折线图
            type: "line",
            // 平滑曲线
            smooth: true,
            // 在顶部显示数据
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  formatter: "{c}"
                }
              }
            }
          }
        ]
      });
})
</script>

<style scoped>
.schart-box {
	display: inline-block;
	margin: 20px;
}
.schart {
	width: 600px;
	height: 400px;
}
.content-title {
	clear: both;
	font-weight: 400;
	line-height: 50px;
	margin: 10px 0;
	font-size: 22px;
	color: #1f2f3d;
}
</style>
